<script setup lang="ts">
import { ref } from "vue";

const { $bus } = useNuxtApp();
const divItemConfig = ref<Record<string, any>>({});
onMounted(() => {
  $bus.on("component-selected", (payload: any) => {
    divItemConfig.value = payload;
  });
});

// const emit = defineEmits(["select"]);

interface BaseConfig {
  label?: string;
  required?: boolean;
  [key: string]: unknown;
}

interface DroppedComponent {
  id: string | number;
  type: string;
  config?: BaseConfig;
  position: number;
  [key: string]: string | number | boolean | object | undefined;
}

const droppedComponents = ref<DroppedComponent[]>([
  { id: 1, name: "基础表格", type: "table", icon: "mdi-table", position: 1 },
]);

const onDrop = (e: DragEvent) => {
  e.preventDefault();
  const component = divItemConfig.value;
  if (droppedComponents.value.some((item: DroppedComponent) => item.id === component.id)) {
    const targetId = (e.target as HTMLElement)?.dataset?.id;
    console.log("targetId", targetId);
    // 交换位置
    if (targetId) {
      const targetIndex = droppedComponents.value.findIndex(
        (item: DroppedComponent) => item.id == targetId
      );
      const currentIndex = droppedComponents.value.findIndex(
        (item: DroppedComponent) => item.id == component.id
      );
      console.log("targetIndex", targetIndex, currentIndex);
      const target = droppedComponents.value[targetIndex];
      const current = droppedComponents.value[currentIndex];
      droppedComponents.value[currentIndex] = target;
      droppedComponents.value[targetIndex] = current;
    }
    return;
  }
  droppedComponents.value.push({
    ...(component as DroppedComponent),
    position: droppedComponents.value.length,
  });
};

const onDragOver = (e: DragEvent) => {
  e.preventDefault();
};
</script>

<template>
  <div class="render-area" @drop="onDrop" @dragover="onDragOver">
    <h3 class="text-lg font-semibold mb-4">渲染区域</h3>
    <div v-if="droppedComponents.length === 0" class="empty-placeholder">
      拖拽组件到此处
    </div>
    <TransitionGroup name="list" tag="ul">
      <li
        v-for="element in droppedComponents"
        :key="element.id"
        draggable="true"
        :data-id="element.id"
        class="component-item border p-4 rounded"
        @dragstart="divItemConfig = element"
      >
        {{ element }}
        <!-- <component
            :is="element.type === 'table' ? TableComponent : element.type"
            :config="element.config"
          /> -->
      </li>
    </TransitionGroup>
  </div>
</template>

<style scoped>
.render-area {
  /* @apply flex-1 p-4 bg-gray-50 min-h-[500px]; */
  flex: 1;
  padding: 1rem;
  background-color: #f5f5f5;
  min-height: 500px;
}

.empty-placeholder {
  /* @apply flex items-center justify-center h-full text-gray-400; */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #a0a0a0;
}

.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
</style>
